<!-- 手机验证组件 主页面 -->
<template>
    <div class="sign">
        <div class="sign-header">
            <router-link to="/index" tag="span" class="iconfont icon-shanchu"></router-link>
            <span>帮助</span>
        </div>
        <div class="sign-content">
            <div class="des">
                <h2>发布视频</h2>
                <p>发布将对您的<a href="">视频标题</a>和<a href="">视频内容</a>进行审核！</p>
            </div>

            <div class="not-sign">
                <p>视频标题<span style="color: red">*</span></p>
            </div>
            <div class="sign-box">
                <div class="inp">
                    <input v-model="dto.title" @input="changeTitle" type="text" class="inp-controll" placeholder="请输入视频标题" />

                </div>
            </div>


            <div class="not-sign">
                <p>视频分类<span style="color: red">*</span><span style="color: wheat">(为你推送更垂直的群体)</span></p>
            </div>
            <el-select v-model="dto.channelId">
                <el-option v-for="(cat,key) in channelArr" :label="cat.channelName" :value="cat.id" :key="key"></el-option>
            </el-select>

            <div class="not-sign">
                <p>上传视频<span style="color: red">*</span></p>
            </div>
            <input type="file" name='upFile' id="upFile" @change='changeFile($event)'>
            <input type="button" name="开始上传" value="开始上传" @click='uploadFile()'>
            <img v-if="coverUrl" :src="coverUrl" alt="封面">
            <el-progress :percentage="filePercent"></el-progress>
            <div class="not-sign">
                <span style="color: red" v-if="showflag">该视频存在违规内容！</span>
            </div>
            <div class="code-btn">
                <button :disabled="disabled" :class="[btnBg?'active':'']" @click="pub">发布</button>
            </div>
        </div>
        <!-- 使用VUE的动态过渡效果 -->

    </div>
</template>

<script>
import { v4 } from 'uuid'
import * as qiniu from 'qiniu-js'
/*撤销视频*/

export default {

    name: 'Publist',
    data() {
        return {
            token:'',
            showflag: false,
            file:null,
            videoUrl:null,
            coverUrl:null,
            filePercent:0,
            channelArr: [],
            url: "",
            telErea: '',
            disabled: true,
            btnBg: false,
            titleRegex: false,
            channelIdRegex: false,
            dto:{
                title: '',
                channelId: '',
                labels: '',
                status: 1,
                content: '',

            }

        }
    },
    created() {
        this.queryChannel();
        this.gettoken();
    },
    mounted() {
        if (this.dto.title!==""){
            if (this.dto.channelId!==""){
                if (this.filePercent===100){
                    this.btnBg = true;
                    this.disabled = false;
                }
            }
        }
    },
    methods: {
        changeFile(e){
            //   获取文件
            this.file = e.target.files[0];
        },
        gettoken(){
            this.axios.get("http://localhost:8083/qiniu/gettoken").then(res=>{
                if (res.data.code===1){
                    this.token=res.data.data;
                }
            })
        },
        uploadFile() {
            // 当前VUE中的this 是指向实例，相当于父级，指向指不到子级中。所需需要一个变量 _this 存储this得指向。
            let _this = this

            const UUID = v4()
            // 上传时的配置
            var config = {
                useCdnDomain: true
            };
            //  设置文件的配置
            var putExtra = {
                fname: UUID+'.mp4',
                params: {},
                mimeType: null
            };


            // _this.file = UUID+'.mp4';
            //   实例化七牛云的上传实例
            var observable = qiniu.upload(_this.file, null, _this.token, putExtra, config);
            //   设置实例的监听对象
            var observer = {
                //   接收上传进度信息
                next(res) {
                    // 上传进度
                    _this.filePercent = parseInt(res.total.percent)
                    if(_this.filePercent==100){
                       _this.$message.success("上传成功！")
                    }
                },
                // 接收上传错误信息
                error(err) {
                    console.log(err)
                },

                // 接收上传完成后的信息
                complete(res) {

                    console.log(res.key)
                    _this.dto.content='http://s3hieczd6.hn-bkt.clouddn.com/'+res.key;
                }
            };
            // 上传开始
             observable.subscribe(observer);
        },

        queryChannel(){
            this.axios.get('http://localhost:8081/video//channel/list').then((response) => {
                if (response.data.code == 1) {
                    this.channelArr = response.data.data;
                }else {
                    this.$message('查询失败');
                }
            })
        },
        pub() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.axios.post('http://localhost:8081/publish/submit', this.dto).then((response) => {
                if (response.data.code === 1) {
                    console.log(response.data);
                    loading.close();
                    this.$message.success(response.data.data);
                    this.$router.push("/me")
                } else {
                    console.log(response.data);
                    loading.close();
                    this.$message.error(response.data.msg);
                }

            })

        },

        changeTitle(e) {
            this.dto.title = e.target.value;
            if (this.dto.title!=="") {
                this.btnBg = true;
                this.disabled = false;
            } else {
                this.btnBg = false;
                this.disabled = true;
            }
        }
    }
}
</script>
<style scoped>
.sign {
    padding: 30px;
}

.sign-header {
    display: flex;
    justify-content: space-between;
}

.sign-header .iconfont {
    font-size: 25px;
}

.sign-content {
    padding: 40px 10px;
}

.des h2 {
    font-size: 24px;
    font-weight: bold;
}

.des p {
    line-height: 50px;
    color: #666;
}

.des p a {
    color: #628db8;
    padding: 0 5px;
}

.sign-box {
    display: flex;
    height: 50px;
    align-items: center;
    background-color: #f9f9f9;
}

.sele-controll {
    background-color: #f9f9f9;
    height: 36px;
    font-weight: bold;
    margin-left: 5px;
    border: none;
    outline: none;
}

.inp-controll {
    background-color: #f9f9f9;
    height: 36px;
    margin-left: 10px;
    border: none;
    width: 90%;
    outline: none;
}

input {
    caret-color: #fe2c55;
}

input::-webkit-input-placeholder {
    color: #666;
}

.not-sign p {
    color: #666;
    font-size: 14px;
    margin-top: 10;
}

.code-btn button {
    margin: 20px 0;
    width: 100%;
    padding: 15px 0;
    border: none;
    color: #fff;
}

.code-btn .active {
    color: #fff;
    background-color: #FE2C55;
}

.other {
    display: flex;
    justify-content: space-between;
}

.other a {
    color: #628db8;
}

.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
}

.oauth {
    height: 48%;
    width: 100%;
    position: absolute;
    bottom: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #ffffff;
    text-align: center;
}

.oauth-item {
    border-bottom: 1px solid #f5f5f5;
    line-height: 62px;
}

.oauth-item span {
    margin-left: 5px;
}

.oauth-item img {
    width: 2em;
    height: 2em;
    vertical-align: -0.8em;
}

.space {
    height: 8px;
    width: 100%;
    background: #ccc;
}

/* 阿里图标库 */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 25px;
}

/* 其他登录动画 */
.up-enter-active,
.up-leave-active {
    transition: all .5s;
}

.up-enter,
.up-leave-to {
    opacity: 1;
    transform: translateY(100%);
}
</style>